<template>
    <div>
      <ul class="bar">
        <li class="item" @click="change(1)">
          <img class="img" :src="action === 1 ? '/static/images/dianying1.png' : '/static/images/dianying.png'" alt=""/>
          <router-link to="/" :class="action === 1 ? 'action' : ''">电影</router-link>
        </li>
        <li class="item" @click="change(2)">
          <img class="img" :src="action === 2 ? '/static/images/yingyuan1.png' : '/static/images/yingyuan.png'" alt=""/>
          <router-link to="/cinema" :class="action === 2 ? 'action' : ''">影院</router-link>
        </li>
        <li class="item" @click="change(3)">
          <img class="img" :src="action === 3 ? '/static/images/wode1.png' : '/static/images/wode.png'" alt=""/>
          <router-link to="/my" :class="action === 3 ? 'action' : ''">我的</router-link>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
      name:"Footer",
      data(){
        return{
          action: 1
        }
      },
      methods: {
        change(ac){
          this.action = ac
        }
      }
    }
</script>

<style lang="less" scoped>
.bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: (50/16rem);
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid #ddd;
  background-color: #fff;
}

.img {
  width: (20/16rem);
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

a {
  color: #878787;
}
.action {
  color: #ee0a24;
}
</style>